---
title: 'devtools'
section: 'API'
subSection: 'Utils'
description: 'Use the Redux DevTools extension with Valtio'
---

# devtools

#### Dev tools

You can use [Redux DevTools Extension](https://github.com/reduxjs/redux-devtools) for plain objects and arrays.

```jsx
import { devtools } from 'valtio/utils'

const state = proxy({ count: 0, text: 'hello' })
const unsub = devtools(state, { name: 'state name', enabled: true })
```

<details>
  <summary>Manipulating state with Redux DevTools</summary>
The screenshot below shows how to use Redux DevTools to manipulate state. First select the object from the instances drop down. Then type in a JSON object to dispatch. Then click "Dispatch". Notice how it changes the state.

<img width="564" alt="image" src="https://user-images.githubusercontent.com/6372489/141134955-26e9ffce-1e2a-4c8c-a9b3-d9da739610fe.png"/>
</details>

#### Use it with vanilla JS

Valtio is not tied to React, you can use it in vanillaJS.

```jsx
import { proxy, subscribe, snapshot } from 'valtio/vanilla'

const state = proxy({ count: 0, text: 'hello' })

subscribe(state, () => {
  console.log('state is mutated')
  const obj = snapshot(state) // A snapshot is an immutable object
})
```

#### Use it with TypeScript

It's recommended to install and import types from `@redux-devtools/extension` to get types correctly.

```ts
import type {} from '@redux-devtools/extension'
import { devtools } from 'valtio/utils'
```
